<template>
  <div class="ttop">
    <center>
      <h3>人气推荐</h3>
      <div class="moods_wai">
        <div class="moods_nei">
          <div class="left" v-for="item in list" :key="item.id" @click="page(item)">
            <img :src="item.pic" alt />
            <p>{{item.name}}</p>
          </div>
        </div>

        <div>
          <div class="right" v-for="item in data" :key="item.id" @click="page(item)">
            <img :src="item.pic" alt />
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </center>
  </div>
</template>
<script>
import center from "../center/center";
export default {
  components: {
    center,
  },
  data() {
    return {
      data: [],
      list: [],
    };
  },
  mounted() {
    this.$API.moods().then((res) => {
      console.log(res);
      this.data = res.data.data.slice(12, 16);
      this.list = res.data.data.slice(8, 12);
    });
  },
  methods: {
    page(item) {
      console.log(item.id);
      this.$router.push({
        path: "/shopping",
        query: {
          id: item.id,
          img:item.pic,
          name:item.name,
          pic:item.originalPrice
        },
      });
    },
  },
};
</script>
<style lang="scss">
.ttop{
  margin-top:5rem;
}
h3 {
  text-align: center;
}
.moods_wai {
  width: 100%;
  display: flex;
  justify-content: space-around;

  .left {
    // display: flex;
    width: 100%;
    height: 16rem;
    // background: rgb(219, 198, 198);
    img {
      width: 100%;
      height: 12rem;
    }
  }
  .right {
    // display: flex;
    width: 100%;
    height: 16rem;
    // background: rgb(219, 198, 198);
    img {
      width: 100%;
      height: 12rem;
    }
  }
}
</style>